<template>
  <div class="home">
    <ul class="list">
      <li v-for="item, index in state.ArticleList" :key="index">

        <a-typography-paragraph>
          <a-image width="100%" :src="item.article_backimg" />
        </a-typography-paragraph>

        <router-link :to="{ name: 'app_info', query: { id: item.article_id } }">
          <a-typography-title :level="3">{{ item.article_title }}</a-typography-title>
          <a-typography-paragraph type="secondary">{{ item.article_text }}</a-typography-paragraph>

          <a-typography-paragraph>
            <a-typography-text strong>
              发布时间: {{ format(item.article_time, 'YYYY-MM-DD HH:mm:ss') }}
              浏览数: {{ item.article_view }}
            </a-typography-text>
          </a-typography-paragraph>

        </router-link>



      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import http, { format } from "@/utils";
import { RouterLink } from 'vue-router';
import { ArticleType } from "@/types/response/home";
import { onMounted, reactive, toRefs } from "vue";

const state: {
  ArticleList: ArticleType<string, string>[]
} = reactive({
  ArticleList: []
})

onMounted(() => {
  getArticleList()
  // getLinkList()
})

let getArticleList = async () => {
  state.ArticleList = await http.articleList()
  console.log("ArticleList: ",state.ArticleList);
} 

let getLinkList = async () => {
  let res = await http.linkList();
  console.log("res: ", res);
} 
</script>




<style lang="less" scoped>
@import "@page/Home.less";
</style>